<div
  id="{{node.id}}"
  ng-attr-style="position: absolute; top: {{ node.y }}px; left: {{ node.x }}px;"
  ng-dblclick="callbacks.doubleClick($event)">
  <div class="{{flowchartConstants.nodeOverlayClass}}"></div>
  <div class="innerNode">
    <p>{{ node.name }}</p>

    <div class="{{flowchartConstants.leftConnectorClass}}">
      <div fc-magnet
           ng-repeat="connector in modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
        <div fc-connector></div>
      </div>
    </div>
    <div class="{{flowchartConstants.rightConnectorClass}}">
      <div fc-magnet
           ng-repeat="connector in modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
        <div fc-connector></div>
      </div>
    </div>
  </div>
  <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" ng-click="callbacks.nodeEdit($event, node)">
    <i class="fa fa-pencil" aria-hidden="true"></i>
  </div>
  <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" ng-click="modelservice.nodes.delete(node)">
    &times;
  </div>
</div>
